<template>
  <div class="container">
    <div class="row kfm-nav">
      <span class="col-2">
        <router-link to="/">首页</router-link>
        &nbsp;
        <router-link to="/home">首页</router-link>
      </span>
      <span class="col-3">
        <router-link to="/news/1001">新闻1</router-link>
        &nbsp;
        <router-link to="/news/2002">新闻2</router-link>
        &nbsp;
        <router-link :to="{ name: 'news' , params: { id: 3003}}">新闻3</router-link>
      </span>
      <span class="col-3">
        <router-link to="/books?id=1001">图书1</router-link>
        &nbsp;
        <router-link to="/books?id=2002">图书2</router-link>
        &nbsp;
        <router-link :to="{ name: 'books', query:{ id: 3003 } }">图书3</router-link>
      </span>
      <span class="col-2">
        <router-link to="/videos/1/2/3/4/5">视频</router-link>
      </span>
      <span class="col-2">
        <router-link to="/sign/in">登录</router-link>
        &nbsp;
        <router-link to="/topic/list">列表</router-link>
      </span>
    </div>
    <div class="kfm-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
.kfm-nav {
  line-height: 50px ;
  background: blue;
  font-size: 16px;
  text-align: center ;
}

.kfm-nav a {
  color: #fff ;
  text-decoration: none ;
  cursor: pointer ;
}
.kfm-nav a:hover {
  cursor: pointer ;
}

.kfm-main {
  border: 1px solid red ;
}
</style>
